<template>
    <section class="malus-hero">
        <div class="container">
        <div class="row banner align-items-center">
            <div class="col-md-6 left">
                <h1>{{$t('home_banner_title')}}</h1>
                <p class="lead">
                    {{$t('home_banner_desc')}}</p>
                <router-link :to="{name: ''}" class="ml-btn">{{$t('home_banner_button')}}</router-link>
            </div>
            <div class="col-md-6">
                <img :src="bannerThumb" alt="">
            </div>
        </div>
        </div>
    </section>
</template>

<script>
export default {
    name: "Banner",
    data() {
        return {
            bannerThumb: require('@/assets/banner_home.jpg')
        }
    }
}
</script>

<style scoped lang="scss">
.malus-hero {
    background: #F2F2FF;
    .banner {
        min-height: 580px;
        .left {
            h1 {
                font-weight: 400;
                color: #222;
                line-height: 1.5;
                margin: 0;
                font-size: 48px;
            }
            .lead {
                color: #444;
                font-size: 15px;
                margin-top: 16px;
                line-height: 1.6;
            }
        }
        img {
            width: 100%;
            margin-top: -98px;
        }
    }
}
@media (max-width: 768px) {
    .banner  {
        padding-top: 108px;
        img {
            margin-top: 0!important;
            margin-bottom: 64px;
        }
        h1 {
            font-size: 36px!important;
        }
    }
}
</style>
